#{extends 'main.html' /}
#{set title:'Modifier une Fiche' /}

<!--  Loading Markitup -->
<link rel="stylesheet" type="text/css" href="@{'/public/markitup/skins/markitup/style.css'}" />
<script type="text/javascript" src="@{'/public/markitup/jquery.markitup.js'}"></script>
<link rel="stylesheet" type="text/css" href="@{'/public/markitup/sets/html/style.css'}" />
<script type="text/javascript" src="@{'/public/markitup/sets/html/set.js'}"></script>
<!-- End markitup -->

#{form @readingsheetmngt.update(), method:'POST', id:'updateSheetForm'}

<input type="hidden" id="readingsheet_id" name="readingsheet.id" value="${readingsheet.id}" />

#{ifErrors}
  <div class="error">
   <p><strong>Oops…</strong> Veuillez corriger les erreurs indiquées avant d'essayer à nouveau.</p>
  </div>
#{/ifErrors}

<p>
  <label>Livre : </label>
  <span class="small bigtitle">${readingsheet.book.titleWithCollectionAndAuthor}</span>
</p>

<p>
    <label>Etoile : </label>
  	<span class="starcontainer">
  		#{list items:1..5, as:'i'}
			#{if readingsheet.grade < i}
				<span class="star"></span>
			#{/if}
			#{else}
				<span class="star over-lock"></span>
			#{/else}
		#{/list}
		<input type="hidden" id="readingsheet_grade" name="readingsheet.grade" value="${readingsheet.grade}" class="starvalue" />
	</span>
	<span class="error">#{error 'readingsheet.grade' /}</span>
</p>


<p>
  <label>Date de lecture : </label>
  <input type="text" id="readingsheet_readingdate" name="readingsheet.readingdate" value="${readingsheet.readingdate?.format('dd/MM/yyyy')}" class="hasdatepicker">
  <span class="error">#{error 'readingsheet.readingdate' /}</span>
</p>

<div class="col-50">
<p>
  <label>Résumé : </label>
  <textarea col="30" row="30" id="readingsheet_resume" name="readingsheet.resume">${readingsheet.resume}</textarea>
</p>
</div>

<div class="col-50 last">
<p>
  <label>Commentaire personnel : </label>
  <textarea col="30" row="30" id="readingsheet_comment" name="readingsheet.comment">${readingsheet.comment}</textarea>
</p>
</div>

<p>
  <label>Visibilité : </label>
  #{select 'readingsheet.right'}
  #{option '0'}privée#{/option}
  #{option '1'}publique#{/option}
  #{option '2'}todo#{/option}
  #{/select}
</p>



<div class="btn-container">
	<input class="btn ok ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Enregistrer" />
	<button class="btn cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Annuler</button>
</div>
#{/form}


<script language="javascript" type="text/javascript">
	$('.btn-container .btn.cancel').click(function() {
		console.log("TODO");
		return false;
	});
	
	
	
	$('#readingsheet_comment').markItUp(mySettings);
	$('#readingsheet_resume').markItUp(mySettings);
</script>



